import data4 from '@/components/graph/config/graphData/data4.json'
import data5 from '@/components/graph/config/graphData/data5.json'
import data6 from '@/components/graph/config/graphData/data6.json'

let data = {nodes: [], edges: []}

class GraphEvent {
    constructor(legend) {
        this.legend = legend
        this.graphExample = undefined
        this.currentLayout = undefined
        this.dragstartHandler = this.dragstart.bind(this)
        this.dragHandler = this.drag.bind(this)
        this.dragEndHandler = this.dragend.bind(this)
    }

    // 绑定事件
    initBindEvent(graphExample) {
        this.graphExample = graphExample
        this.nodeClick()
        this.edgeClick()
        this.canvasDblclick()
        this.canvasClick()
        this.afterLayout()
    }

    // 节点点击事件
    nodeClick() {
        this.graphExample.on('node:click', (ev) => {
            let id = ev.item.get('id')

            if (id.length === 3 && Number(id) > 300) {
                data.nodes = data4.data.nodes.filter(v => v.id === id)
                data.edges = data4.data.edges.filter(v => v.target === id)
                let sourceNode = data4.data.nodes.filter(v => v.id === data.edges[0].source)
                data.nodes.push(sourceNode[0])
                // ------------------------------------------------------------
                let {data: {nodes, edges}} = data5
                let newNodes = nodes.filter(v => v.id.indexOf(id) !== -1)
                let newEdges = edges.filter(v => v.source.indexOf(id) !== -1)
                newEdges.forEach(v => {
                    nodes.forEach(item => {
                        if (v.target === item.id) {
                            newNodes.push(item)
                        }
                    })
                })
                let newData = {nodes: [...newNodes, ...data.nodes], edges: [...newEdges, ...data.edges]}
                this.graphExample.changeData(newData)
                return
            }
            console.log(data4,213)
            if (id.length <= 3 && Number(id) <= 300) {
                let targetNode = data5.data.nodes.filter(v => v.id === id)[0]
                let tsEdges = data5.data.edges.filter(v => v.target === id)[0]
                let sourceNode = data5.data.nodes.filter(v => v.id === tsEdges.source)[0]

                data.nodes.push(targetNode)
                data.nodes.push(sourceNode)
                data.edges.push(tsEdges)
                // ------------------------------------------------------------
                let {data: {nodes, edges}} = data6
                let newNodes1 = nodes.filter(v => v.id === id)
                let newEdges1 = edges.filter(v => v.source === id)
                newEdges1.forEach(v => {
                    nodes.forEach(item => {
                        if (v.target === item.id) {
                            newNodes1.push(item)
                        }
                    })
                })
                data.nodes.forEach(v => {
                    delete v.x
                    delete v.y
                })
                data.edges.forEach(v => {
                    delete v.x
                    delete v.y
                })
                let newData = {nodes: [...data.nodes, ...newNodes1], edges: [...data.edges, ...newEdges1]}
                console.log(111, newData)
                this.graphExample.changeData(newData)
                this.graphExample.refresh()
            }
        })
    }

    // 边点击事件
    edgeClick() {
        this.graphExample.on('edge:click', (evt) => {
            this.setAllinActive()
            const sourceNode = evt.item.getSource()
            const targetNode = evt.item.getTarget()
            evt.item.setState('active', true);
            sourceNode.setState('active', true);
            targetNode.setState('active', true);
        })
    }

    // 图谱双点事件
    canvasDblclick() {
        this.graphExample.on('canvas:dblclick', () => {
            const data = this.legend.get('graph').findAllByState('node', 'active')
            if (data.length) {
                data.forEach(v => v.clearStates('active'))
                // 重新绘制legend
                this.legend.render()
            }
            this.clearAllState()
        });
    }

    // 设置非选中状态
    setAllinActive() {
        let list = this.graphExample.getNodes().concat(this.graphExample.getEdges())
        list.forEach(item => {
            item.setState('active', false)
            item.setState('inactive', true)
        })
    }

    // 清除所有状态
    clearAllState() {
        const allNodes = this.graphExample.getNodes().concat(this.graphExample.getEdges())
        allNodes.forEach(v => v.clearStates(['active', 'inactive']))
    }

    // 检索图谱
    searchItem(params) {
        if (params) {
            this.setAllinActive()
            const findNode = this.graphExample.findAll('node', (node) => node.getModel().label.includes(params));
            for (let i = 0; i < findNode.length; i++) {
                findNode[i].setState('active', true)
            }
        } else {
            this.clearAllState()
        }
    }

    // 图谱单击事件
    canvasClick() {
        // this.graphExample.on('canvas:click', () => {
        // })
    }

    // 图谱布局之后
    afterLayout() {
        this.graphExample.on('beforelayout', () => {
            this.currentLayout = this.graphExample.get('layout').type
            if (this.graphExample.isAnimating()) {
                this.graphExample.stopAnimate()
            }
        })
        this.graphExample.on('afterlayout', () => {
            if (this.graphExample.getNodes().length > 100) {
                this.graphExample.fitView([30, 0], {}, true)
            }
            this.offDragLayout()
            if (this.currentLayout === 'force') {
                this.dragLayout()
            } else if (this.currentLayout === 'force2') {
                this.dragLayout()
            }
        })
    }

    // 拖拽重新布局
    dragLayout() {
        this.graphExample.on('node:dragstart', this.dragstartHandler);
        this.graphExample.on('node:drag', this.dragHandler);
        this.graphExample.on('node:dragend', this.dragEndHandler);
    }

    offDragLayout() {
        this.graphExample.off('node:dragstart', this.dragstartHandler);
        this.graphExample.off('node:drag', this.dragHandler);
        this.graphExample.off('node:dragend', this.dragEndHandler);
    }

    // 拖拽开始
    dragstart(e) {
        if (this.currentLayout === 'force') {
            this.graphExample.layout();
            this.refreshDragNodePosition(e)
        } else {
            const forceLayout = this.graphExample.get('layoutController').layoutMethods[0];
            forceLayout.stop()
        }
    }

    // 拖拽过程
    drag(e) {
        if (this.currentLayout === 'force') {
            const forceLayout = this.graphExample.get('layoutController').layoutMethods[0];
            forceLayout.execute();
            this.refreshDragNodePosition(e);
        } else {
            this.refreshDragNodePosition(e);
            this.graphExample.layout()
        }
    }

    // 拖拽结束
    dragend(e) {
        if (this.currentLayout === 'force') {
            e.item.get('model').fx = null;
            e.item.get('model').fy = null;
        }
    }

    refreshDragNodePosition(e) {
        if (this.currentLayout === 'force') {
            const model = e.item.get('model');
            model.fx = e.x;
            model.fy = e.y;
        } else {
            const model = e.item.get('model');
            model.fx = e.x;
            model.fy = e.y;
            model.x = e.x;
            model.y = e.y;
        }
    }

    changeStyle(ev) {
        const shapeName = ev.target.get('name');
        if (shapeName !== 'prev-shape' && shapeName !== 'next-shape') {
            this.setAllinActive()
            ev.item.setState('active', true);
            const allEdge = ev.item.getEdges()
            const InEdges = ev.item.getInEdges();
            const OutEdges = ev.item.getOutEdges();
            let itemList = [...allEdge]
            InEdges.forEach(v => itemList.push(v.getSource()))
            OutEdges.forEach(v => itemList.push(v.getTarget()))
            itemList.forEach(v => v.setState('active', true))
        } else {
            const data = {
                nodes: [{
                    id: '1',
                    label: "李老师",
                    nodeTypeName: "老师",
                    age: 28,
                    address: "河南"
                }, {
                    id: '14',
                    label: "赵老师",
                    nodeTypeName: "老师",
                    age: 44,
                    address: "青海"
                }],
                edges: [{
                    source: '14',
                    target: '1',
                    label: "同事"
                }]
            }
            this.graphExample.changeData(data)
        }
    }
}

export default GraphEvent

